<template>
    <div class="my-areaMap">
        <div class="area-map-top">
            <div class="top-card" v-for="item in button_list" :key="item.id"
                 @mouseenter="hoverButton(item)"
                 @mouseleave="unHoverButton(item)"
                 @click="selectButton(item)">
                <img alt="" :src="item.currentUrl || item.url"/>
            </div>
        </div>
        <div class="area-map-bottom">
            <div class="floating-div">
                <dv-scroll-board :config="config" style="width:100%;height:99%" ref="scrollBoard"/>
            </div>
            <div class="normal-div">
                <div ref="chart" class="chart"></div>
            </div>
        </div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
import {heightConfig3, set_option_areaMap_plus, set_option_areaMap_pro} from "@/utils/loadPage";
import axios from "axios";

// 地图
export default {
    name: 'MyAreaMap',
    data() {
        return {
            config: {},
            max_Height: heightConfig3(),
            button_list: [
                {
                    id: 1,
                    url: '/img/slices/center_elder2@2x.png',
                    hover_url: '/img/slices/center_elder1@2x.png',
                    currentUrl: ''
                },
                {
                    id: 2,
                    url: '/img/slices/center_social2@2x.png',
                    hover_url: '/img/slices/center_social1@2x.png',
                    currentUrl: ''
                },
                {
                    id: 3,
                    url: '/img/slices/center_device2@2x.png',
                    hover_url: '/img/slices/center_device1@2x.png',
                    currentUrl: ''
                },
                {
                    id: 4,
                    url: '/img/slices/center_work_device2@2x.png',
                    hover_url: '/img/slices/center_work_device1@2x.png',
                    currentUrl: ''
                },
                {
                    id: 5,
                    url: '/img/slices/center_device_online2@2x.png',
                    hover_url: '/img/slices/center_device_online1@2x.png',
                    currentUrl: ''
                },
            ],
            form: {
                title: '地图测试',  // 图表标题
                title_center: 'center', // 标题位置
                map_name: 'songJiang', // 地图映射名称
                min: 800,
                max: 65000,
                addr: '所在小区',
                device_type: '设备类型',
                alarm_type: '告警类型',
                alarm_time: '告警时间',
                imgUrl: '/img/slices/alarm@2x.png',  // 告警图标
                alarms: [], // 告警信息
                dataList: [] // 所有数据
            },
            selectedButton: null,
        }
    },
    mounted() {
        // 默认选择第一个按钮
        this.selectButton(this.button_list[0]);
        this.handleResize()
        // 组件挂载时监听窗口大小变化事件，并设置定时器定时获取支付信息
        window.addEventListener('resize', this.handleResize);
        // this.timer = setInterval(this.handleResize, 10000)
    },
    beforeDestroy() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },

    methods: {
        hoverButton(item) {
            if (this.selectedButton !== item) {
                item.currentUrl = item.hover_url;
            }
        },
        unHoverButton(item) {
            if (this.selectedButton !== item) {
                item.currentUrl = item.url;
            }
        },
        selectButton(item) {
            this.button_list.forEach(button => {
                if (button === item) {
                    button.currentUrl = button.hover_url;
                } else {
                    button.currentUrl = button.url;
                }
            });
            this.selectedButton = item;
            console.log('当前选中的按钮', this.selectedButton.id, this.selectedButton)
        },
        // 注册地图
        async set_register_map() {
            let response = await axios.get('/json/songJiang.json');
            let geoJson = response.data;
            echarts.registerMap('songJiang', geoJson);
        },
        handleResize() {
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.set_option()
        },

        async set_option() {
            // 设置图表选项，如果已有图表实例则销毁旧的，重新初始化并设置新选项
            // if (this.myChart) {
            //     this.myChart.dispose(); // 销毁 ECharts 实例
            // }
            await this.set_register_map();
            this.myChart = echarts.init(this.$refs.chart, null, {
                renderer: "svg"
            }) // 初始化 ECharts 实例
            let option = await set_option_areaMap_plus(this, this.form);
            this.myChart.setOption(option);
        },

        get_data() {
            this.form.dataList = [
                {
                    name: '岳阳街道',
                    value: 20057.34,
                    addr: '岳阳小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 10:30:12'
                },
                {
                    name: '永丰街道',
                    value: 15477.48,
                    addr: '永丰小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:12'
                },
                {
                    name: '方松街道',
                    value: 31686.1,
                    addr: '方松小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-02 11:30:12'
                },
                {
                    name: '泗泾镇',
                    value: 6992.6,
                    addr: '泗泾小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-07-01 11:30:12'
                },
                {
                    name: '佘山镇',
                    value: 44045.49,
                    addr: '佘山小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:16'
                },
                {
                    name: '车墩镇',
                    value: 40689.64,
                    addr: "车墩小区",
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 15:30:16'
                },
                {
                    name: '新桥镇',
                    value: 37659.78,
                    addr: '新桥小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-06 11:30:16'
                },
                {
                    name: '洞泾镇',
                    value: 45180.97,
                    addr: '洞泾小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:16'
                },
                {
                    name: '九亭镇',
                    value: 55204.26,
                    addr: '九亭小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:16'
                },
                {
                    name: '泖港镇',
                    value: 21900.9,
                    addr: '泖港小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:30:16'
                },
                {
                    name: '石湖荡镇',
                    value: 4918.26,
                    addr: '石湖小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-02-01 10:30:16'
                },
                {
                    name: '新浜镇',
                    value: 5881.84,
                    addr: '新浜小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:50:16'
                },
                {
                    name: '叶榭镇',
                    value: 4178.01,
                    addr: '叶榭小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-12 10:30:00'
                },
                {
                    name: '小昆山镇',
                    value: 2227.92,
                    addr: '昆山小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 11:10:16'
                },
                {
                    name: '松江工业区',
                    value: 2180.98,
                    addr: '松江小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-05-01 11:30:16'
                },
                {
                    name: '中山街道',
                    value: 9172.94,
                    addr: '中山小区',
                    device_type: '一键通',
                    alarm_type: 'SOS呼叫',
                    alarm_time: '2024-08-01 1:30:16'
                }
            ];

            this.form.alarms = Math.random() > 0.5 ? [
                        {name: 'Alarm 1', coord: [121.21223452281953, 31.004928645747075], content: 'This is alarm 1'},
                        {name: 'Alarm 2', coord: [121.23335070342061, 31.06789758119864], content: 'This is alarm 2'},
                    ] :
                    [
                        {name: 'Alarm 3', coord: [121.16104059881826, 31.10617707148171], content: 'This is alarm 3'},
                        {name: 'Alarm 4', coord: [121.27343559324692, 31.066865630741997], content: 'This is alarm 4'},
                        {name: 'Alarm 5', coord: [121.32341579250433, 30.912173084073896], content: 'This is alarm 5'},
                        {name: 'Alarm 6', coord: [121.173769812578, 30.9955120047296], content: 'This is alarm 6'},
                    ]
            this.set_scroll_board(this.form.dataList)
        },

        set_scroll_board(rows) {
            let data = []
            if (rows && rows.length > 0) {
                rows.forEach((item, index) => {
                    data.push([
                        '<span style="font-size: 13px;">' + (index + 1) + "." + item.name + '</span>',
                        '<span style="font-size: 15px;">' + Math.ceil(item.value / 100) + '</span>',
                    ])
                })
            }
            this.config = {
                data: data,
                index: false,
                columnWidth: [160, 90],
                align: ['left', 'right'],
                rowNum: 5,
                headerHeight: 45,
                oddRowBGC: 'rgba(0, 44, 81, 0)',
                evenRowBGC: 'rgba(10, 29, 50, 0)'
            }
        },
    }

}
</script>
<style scoped lang="scss">

.my-areaMap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;


    .area-map-top {
        flex: 1;
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .top-card {
            width: 18%;
            height: 90%;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0.85;

            img {
                width: 55%;

            }


        }

    }

    .area-map-bottom {
        flex: 6;
        box-sizing: border-box;
        //border: #ee00ff solid 1px;
        position: relative; /* 父容器相对定位 */
        flex-direction: column;


        .floating-div {
            position: absolute;
            width: 20%;
            height: 36%;
            top: 3.5%;
            left: 3.5%;
            padding: 1.7% 1% 0 1%;
            box-sizing: border-box;

            background-image: url("/public/img/slices/center_bottom1@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            opacity: 0.95;

            ::v-deep .rows {
                color: #B4C0DB;
                font-weight: bold;

                .row-item {
                    width: 100%;
                    border-bottom: 1px solid rgba(2, 187, 255, 0.2); /* 设置每行的分割线 */
                }

                .row-item:nth-child(1) {
                    color: #1ED2FF !important;
                }

                .row-item:nth-child(2) {
                    color: #1ED2FF !important;
                }
            }

        }

        .normal-div {
            /* 可根据需要设置样式，保持和父容器一样的大小 */
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            //border: #ff0000 solid 1px;
        }


        .chart {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
    }
}
</style>
